<template>
  <div class="container-fluid" :style="{ backgroundImage: `url(${preloadImgs[0]})` }">

    <div class="container p-0">
      <div class="fs-5 fw-bold text-primary">雅马哈旗舰店</div>
      <div class="fs-3 fw-bold">雅马哈旗舰店让您亲身感受和了解雅马哈产品魅力</div>
    </div>

    <div class="content">

      <div class="left me-4">
        <div class="mask">
          <div><img class="w-100 " :src="preloadImgs[1]" alt=""></div>
        </div>
        <span class="address ps-3 ">
          <i class="bi bi-geo-alt-fill me-2"></i>西安市未央区谭5号
        </span>
      </div>

      <div class="center me-4">
        <div class="top">
          <div class="mask">
            <div><img class="w-100 " :src="preloadImgs[2]" alt=""></div>
          </div>
          <span class="address ps-3 "><i class="bi bi-geo-alt-fill me-2"></i>西安市未央区谭5号</span>
        </div>

        <div class="botttom">
          <div class="mask">
            <div><img class="w-100" :src="preloadImgs[3]" alt=""></div>
          </div>
          <span class="address ps-3 ">
            <i class="bi bi-geo-alt-fill me-2"></i>西安市未央区谭5号
          </span>
        </div>
      </div>

      <div class="right">
        <div class="top">
          <div class="mask">
            <div><img class="w-100 " :src="preloadImgs[4]" alt=""></div>
          </div>
          <span class="address ps-3 "><i class="bi bi-geo-alt-fill me-2"></i>西安市未央区谭5号</span>
        </div>

        <div class="botttom">
          <div class="mask">
            <div><img class="w-100" :src="preloadImgs[5]" alt=""></div>
          </div>
          <span class="address ps-3 "><i class="bi bi-geo-alt-fill me-2"></i>西安市未央区谭5号</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const storesImgs: any = {
  storebg: '/img_new/store-bg.jpg',
  xian: '/img_new/xian.jpg',
  beijing: '/img_new/beijing.jpg',
  chnegdu: '/img_new/chengdu.jpg',
  shanghai: '/img_new/shanghai.jpg',
  najing: '/img_new/nanjing.jpg'
}
onMounted(() => {
  getImgs()
})

const preloadImgs = ref<string[]>([])
const getImgs = () => {
  Object.keys(storesImgs).forEach((item: string) => {
    const img = new Image()
    img.src = '/api' + storesImgs[item]
    preloadImgs.value.push(img.src)
  })
}
</script>

<style scoped lang="scss">
.container-fluid {
  padding: 80px 0;
  // background-color: red;
  background-size: cover;


  .content {
    width: 100%;
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    // background-color: red;

    /* 地址文字样式 */
    .address {
      display: block;
      position: relative;
      z-index: 5;
      height: 15%;
      width: 100%;

      display: flex;
      align-items: center;
      font-size: 14px;
      color: white;
      background: linear-gradient(rgb(6, 64, 83), rgb(98, 98, 167));

      &:hover {
        color: skyblue;
      }
    }


    .left {
      flex: 1;

      >.mask {
        position: relative;

        >div::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          background-color: rgba(0, 0, 0, .4);
          /* 给伪元素蒙版上上过渡 */
          transition: background-color .2s ease-in-out;
        }

        &:hover {
          >div::after {
            content: "";
            background-color: rgba(0, 0, 0, 0);
          }
        }
      }

      /* left区域单独设置高度百分比以适应缩放 */
      .address {
        height: 7%;
      }
    }

    .center,
    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;

      .mask {
        position: relative;

        /* byd,img是添不上伪元素的
        伪元素只能用于块级元素和某些内联块元素 */
        >div::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          background-color: rgba(0, 0, 0, .4);
          /* 给伪元素蒙版上上过渡 */
          transition: background-color .2s ease-in-out;
        }

        &:hover {
          >div::after {
            content: "";
            background-color: rgba(0, 0, 0, 0);
          }
        }
      }

    }

  }
}
</style>